<template>
    <div id="HomePage">
        <div class="homeTop">
            <ul>
                <li @click="pushToAddNewVisitor">
                    <span>新增上门</span> 
                    <i class="glyphicon glyphicon-plus"></i>
                </li>
                <li @click="pushToMyStudentsList">
                    <span>我的学员</span>
                    <i class="glyphicon glyphicon-user" ></i>
                </li>
                <li @click="pushToVisitorList">
                    <span>上门量</span>
                    <i class="glyphicon glyphicon-signal"></i>
                </li>
                <li @click="pushToInvalidList">
                    <span>无效量</span>
                    <i class="glyphicon glyphicon-warning-sign"></i>
                </li>
            </ul>
        </div>
        <div class="homeMiddle">
            <div class="visitorTrend" id="myChart">
                
            </div>
        </div>
        <div class="homeFoot">

        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
// import bar from 'echarts/lib/chart/bar';
// import toolTip from 'echarts/lib/component/tooltip';
// import title from 'echarts/lib/component/title';
export default {
    methods: {
        pushToAddNewVisitor(){
            this.$router.push({name: 'AddNewVistor'})
        },
        pushToVisitorList(){
            this.$router.push({name: '上门量管理'})
        },
        pushToInvalidList(){
            this.$router.push({name: '无效量分量管理'})
        },
        pushToMyStudentsList(){
            this.$router.push({name: 'MyStudentList'})
        },
         drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title: {
                text: '上门量'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data:['新上门','试学量','报名量','无效量']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'新上门',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data : [11,22,33,44,15,26,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
                },
                {
                    name:'试学量',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data : [1,2,3,14,5,16,17,8,9,110,11,11,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
                },
                {
                    name:'报名量',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data : [1,12,3,14,5,26,7,28,91,10,11,12,11,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
                },
                {
                    name:'无效量',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
                },
                {
                    name:'搜索引擎',
                    type:'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {normal: {}},
                    data : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
                }
            ]
                    });
                }
    },
    mounted() {
        this.drawLine();
    },
}
</script>

<style lang="scss" scoped>
    #HomePage {
        position: absolute;
        top: 44px;
        bottom: 0;
        right: 0;
        left: 0;
    }
    .homeTop {
        width: 100%;
        height: 150px;
        ul {
            width: 100%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            li {
                flex:1;
                height: 100%;
                margin-left: 10px;
                border-radius: 10px;
                color: white;
                font-size: 30px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                i {
                    font-size:60px;
                }
                &:nth-child(1){
                    background: #75b9e6;
                };
                &:nth-child(2){
                    background: rgb(160, 220, 163);
                };
                &:nth-child(3){
                    background: paleturquoise;
                }
                &:nth-child(4){
                    background: rgb(194, 198, 197);
                }                    
            }
        }
    }
    .homeMiddle {
        width: 100%;
        padding: 10px;
        .visitorTrend {
            width: 100%;
            height: 300px;
            background-color: white;
        }
    }
    
</style>
